<template>
  <div class='hawkPage' :class='{collapse}'>
    <div class='hawkHead'>
      <div class='hawkLogo' >
        <i class='iconfont icon-touxiang' style='font-size:30px;color: #00A1D8'></i>
        <span v-if='!collapse'>HAWK</span>
      </div>
      <div class='headRight'>
        <head-menu></head-menu>
        <user-info></user-info>
      </div>
    </div>
    <div class='page' >
      <div class='aside'>
        <div class='openMenu' @click='changeCollapse'>
          <img src='@/assets/images/menuLeft.png' v-if='!collapse' />
          <img src='@/assets/images/menuRight.png' v-else />
        </div>
        <el-aside  :width='!collapse ? "230px" : "60px"'>
          <div @mouseenter.stop.prevent='handleEnter' @mouseleave.stop.prevent='handleLeave'>
            <el-menu
              router
              unique-opened
              :default-active='getAcitveIndex()'
              class="el-menu-vertical"
              backgroundColor="#F9F9F9"
              text-color="#666"
              active-text-color="#f5f5f5"
              :collapse='collapse'
            >
              <template>
                <side-item v-for='item in asideMenu.children'
                           :key="item.path"
                           :full-path="fullPath(item)"
                           :item="item"
                >
                </side-item>
              </template>
            </el-menu>
          </div>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </div>
    </div>
  </div>
</template>

<script>
import path from 'path'
import UserInfo from './components/userInfo'
import HeadMenu from './components/headMenu'
import SideItem from './components/sideItem/sideItem'

import { mapActions, mapGetters } from 'vuex'

export default {
  components: { SideItem, HeadMenu, UserInfo },
  data() {
    //这里存放数据",
    return {
      hoverTag:true,
      hoverSwitch:true,
    }
  },
  //监听属性 类似于data概念",
  computed: {
    ...mapGetters({
      asideMenu: 'menu/aside',
      collapse:'menu/isCollapse'
    })
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    ...mapActions({
      setContent: 'menu/setContent',
      setCollapse:'menu/setCollapse'
    }),
    fullPath(item) {
      return path.resolve(this.asideMenu.path, item.path)
    },
    changeCollapse(){
      this.setCollapse(!this.collapse)
      this.hoverTag = !this.hoverTag
    },
    getAcitveIndex(){
      return location.pathname.split('/hawk')[1]
    },
    handleEnter(event){
      if(this.collapse === true && !this.hoverTag){
        this.setCollapse(false)
      }
    },
    handleLeave(event){
      if(this.collapse === false && !this.hoverTag){
        this.setCollapse(true)
      }
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {

  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  }

}
</script>

<style lang='scss'>
.hawkPage {
  min-width: 100%;
  background: #ffffff;

  .hawkHead {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    background: #151F29;

    .hawkLogo {
      width: 230px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1E2C39;
      transition:width 500ms;
      span{
        font-size: 20px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 12px;

      }
    }
    .headRight {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - 230px);
      background: #151F29;
      position: relative;
    }
  }

}
.collapse{
  .hawkHead{
    .hawkLogo{
      width: 60px;
    }
    .headRight{
      width: calc(100% - 60px);
    }
  }
  .page{
    .aside{
      
      .openMenu{
        left:43px;
      }
    }
  }
}
.page {
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
  .openMenu{
    position: absolute;
    top: 50%;
    left: 212px;
    z-index: 99;
    transition: left 500ms;
    img{
      color: #333333;
      width: 48px;
    }
  }
  .aside{
    display: flex;

    .el-aside{
      height: calc(100vh - 60px);
      transition: width 500ms;
      overflow-x: hidden;
      background: #F9F9F9;
    }
    .el-menu-vertical {
      background: #ffffff;
      height: calc(100vh - 60px);
      width: 229px;
      transition: width 500ms;
    }
  }

  .el-menu-item{
    height: 42px;
    line-height: 42px;
  }
  .el-submenu__title{
    height: 42px;
    line-height: 42px;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-main{
    height: calc(100vh - 60px);
    background: #ffffff;
    padding: 0px !important;
  }
}
.is-active{
  background-color: #00A1D8!important;
}
</style>